<template>
	<div class="header_wrap" :style="`padding-top: ${statusBarHeight}px`">
		<div class="goback" @click="goBack" :style="`padding-top: ${statusBarHeight}px`">
			<image class="goback_img" src="@/static/card/back.png" mode="widthFix"></image>
		</div>
		<div class="header_title">{{ pageTitle }}</div>
	</div>
</template>
<script setup lang="ts">
	import {
		TUIStore,
		StoreName,
		IConversationModel,
		TUITranslateService,
	} from "@tencentcloud/chat-uikit-engine";
	import { onLoad } from "@dcloudio/uni-app";
	import { ref } from "../../../adapter-vue";
	import { TUIGlobal } from "../../../utils/universal-api/index";

	const currentConversation = ref<IConversationModel>();
	const typingStatus = ref(false);

	let pageTitle = ref<String>("")

	const setChatHeaderContent = (content : string) => {
		TUIGlobal?.setNavigationBarTitle({
			title: content || '   ',
		});
		pageTitle.value = content;
	};

	TUIStore.watch(StoreName.CONV, {
		currentConversation: (conversation : IConversationModel) => {
			currentConversation.value = conversation;
			if (!typingStatus.value) {
				setChatHeaderContent(currentConversation?.value?.getShowName());
			}
		},
	});

	TUIStore.watch(StoreName.CHAT, {
		typingStatus: (status : boolean) => {
			typingStatus.value = status;
			switch (typingStatus.value) {
				case true:
					setChatHeaderContent(TUITranslateService.t("TUIChat.对方正在输入"));
					break;
				case false:
					setChatHeaderContent(currentConversation?.value?.getShowName());
					break;
			}
		},
	});

	onLoad((options : any) => {
		setChatHeaderContent(currentConversation?.value?.getShowName());
	});

	let systemInfo = uni.getSystemInfoSync();
	let statusBarHeight = systemInfo.statusBarHeight;

	const goBack = () => {
		uni.navigateBack({
			delta: 1
		});
	}
</script>
<style scoped lang="less">
	.header_wrap {
		flex: none;
		height: 108rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		line-height: 100rpx;
		color: #1D1D1D;
		font-weight: 500;
		letter-spacing: 3rpx;
		margin-bottom: 30rpx;
		position: relative;
		background-color: transparent;
		color: #fff;
		position: relative;
		top: 0;

		&.TUI-chat-header {
			margin-top: 20rpx;
			padding: 0 30rpx;

		}

		.goback {
			position: absolute;
			z-index: 2;
			width: auto;
			height: 100%;
			bottom: 0;
			top: 0;
			left: 0;
			display: inline-flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 0 60rpx 0 40rpx;
			box-sizing: border-box;

			.goback_img {
				flex: none;
				width: 20rpx;
			}
		}

		.header_title {
			max-width: 80%;
			overflow: hidden;
			text-overflow: ellipsis;
			word-break: break-all;
			white-space: nowrap;
		}
	}
</style>